<template>
  <div>
    <el-container>
      <el-header height="auto">
        <div>
          <el-steps :active="activestep" align-center>
            <el-step v-for="o in stages" :key="o.sequence" :title="o.item" :description="o.content"></el-step>
          </el-steps>
          <el-button style="margin-top: 12px;" @click="next">下一步{{project}}</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <el-card class="timeline">
            <div class="radio" slot="header">
              排序：
              <el-radio-group v-model="reverse">
                <el-radio :label="true">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
              </el-radio-group>
            </div>
            <div class="timelineheight">
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.timestamp"
                >{{activity.content}}</el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-aside>
        <el-main>
          <el-row>
            <el-col :span="12">
              <div>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>项目任务浏览区</span>
                    <el-popover
                      placement="bottom"
                      title="标题"
                      width="200"
                      trigger="click"
                      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                    >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        slot="reference"
                      >说明</el-button>
                    </el-popover>
                  </div>
                  <div class="listborder">
                    <li v-for="o in works" :key="o.id" class="text item">
                      <router-link :to="{name: 'Show_work', params: {id: o.id}}">{{o.item}}</router-link>
                    </li>
                  </div>
                </el-card>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>项目功能区</span>
                    <el-popover
                      placement="bottom"
                      title="标题"
                      width="200"
                      trigger="click"
                      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                    >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        slot="reference"
                      >说明</el-button>
                    </el-popover>
                  </div>
                  <div class="listborder">
                    <li class="text item">
                      <router-link :to="{name: 'Stages', params: {pjname: project}}">项目阶段设置</router-link>
                    </li>
                    <li class="text item">
                      <router-link :to="{name: 'Post', params: {id: 1}}">查看日志</router-link>
                    </li>
                    <li class="text item">
                      <router-link :to="{name: 'Create_work', params: {pjname: project}}">工作任务设置</router-link>
                    </li>
                    <li class="text item">
                      <router-link :to="{name: 'Create_post', params: {pjname: project}}">编写工作总结</router-link>
                    </li>
                    <li class="text item">
                      <router-link
                        :to="{name: 'Problem', params: {id: 'new',pjname: project}}"
                      >提问</router-link>
                    </li>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>工作日志查看区</span>
                    <el-popover
                      placement="bottom"
                      title="标题"
                      width="200"
                      trigger="click"
                      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                    >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        slot="reference"
                      >说明</el-button>
                    </el-popover>
                  </div>
                  <div class="listborder">
                    <li v-for="o in posts" :key="o.id" class="text item">
                      <router-link :to="{name: 'Show_post', params: {id: o.id}}">{{o.item}}</router-link>
                    </li>
                  </div>
                </el-card>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>项目问题讨论区</span>
                    <el-popover
                      placement="bottom"
                      title="标题"
                      width="200"
                      trigger="click"
                      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                    >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        slot="reference"
                      >说明</el-button>
                    </el-popover>
                  </div>
                  <div class="listborder">
                    <li v-for="o in problems" :key="o.id" class="text item">
                      <router-link
                        :to="{name: 'Problem', params: {id: o.id, pjname: project}}"
                      >{{o.item}}</router-link>
                    </li>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getlogs, getprojectinfos, postprojectinfos } from "@/api/table";

export default {
  data() {
    return {
      project: null,
      reverse: true,
      activestep: 1,
      stages: [],
      activities: [],
      works: [],
      problems: [],
      posts: []
    };
  },
  created() {
    this.project = this.$route.params.project;
    if(this.project) {
      this.$store.dispatch('routeinfo/setpjname',this.project);
    } else {
      this.project = this.$store.getters.projectname;
    }
    this.getAllInfo();
  },
  methods: {
    getlog() {
      getlogs(this.project).then(response => {
        this.activities = response.data;
      });
    },
    next() {
      if (this.activestep++ > this.stages.length) this.activestep = 1; // 需要修改！！！
    },
    getAllInfo() {
      getprojectinfos(this.project, "all").then(res => {
        this.stages = res.data.stages;
        this.works = res.data.works;
        this.activestep = res.data.current_stage;
        this.problems = res.data.problems;
        this.posts = res.data.posts;
        this.activities = res.data.logs;
      });
    }
  }
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.listborder {
  overflow-y: auto;
  height: 150px;
}

.box-card {
  width: auto;
}

.timeline {
  width: auto;
}

.timelineheight {
  height: 400px;
  overflow-y: auto;
}
</style>

